{% extends 'template/base.html' %}

{% block head %}
    {{ super() }}
    <title>{{ product.name }}</title>
{% endblock %}
{% block body %}
    {% include 'template/user-header.html' %}
    <style>
        .container {
            display: flex;
            flex-direction: column;
        }

        .container .product {
            margin-top: 40px;
            display: flex;
            flex-direction: row;
            justify-content: center;
        }

        .container .product > img {
            margin-right: 20px;
            width: 300px;
            height: 300px;
        }

        .container .product .right {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }

        .container .product .right .name {
            font-size: 1.2em;
            color: #555;
        }

        .container .product .right .price {
            color: orangered;
            font-size: 1.9em;
        }

        .container .product .right .other {
            color: #666;
            font-size: 1em;
        {#margin-left: 10px;#}
        }
    </style>
    <div class="container">
        <div class="product">
            <img src="{{ url_for('static', filename='upload/' + product.img) }}" alt="">
            <div class="right">
                <div class="name">{{ product.name }}</div>
                <div class="price">￥ <strong>{{ product.price }}</strong></div>
                <div class="other">库存{{ product.reserve }}件</div>
                <div class="other">成交{{ close_count }}次</div>
                <div class="other">销量{{ sales }}</div>

                {% if product.valid %}

                    <form class="form-horizontal" method="post" action="{{ url_for('web.new_order_ep') }}"
                          style="flex-grow: 2;display: flex;flex-direction: column;justify-content: flex-end">
                        <input type="text" name="product_id" hidden value="{{ product.id }}">

                        <div class="form-group" style="margin-left: -80px">
                            <label class="col-sm-4 control-label custom">购买数量</label>
                            <div class="col-sm-8" style="position: relative;left: -20px;">
                                <input type="number" name="count" class="form-control" value="1">
                            </div>
                        </div>

                        {% if form_errors.count %}
                            <div style="text-align: left;color:red;margin-bottom: 15px;">
                                {{ form_errors.count | join('，') }}
                            </div>
                        {% endif %}


                        {% if current_user.is_authenticated %}
                            <button type="submit" class="btn btn-success">立即购买</button>
                        {% else %}
                            <a type="button" class="btn btn-success"
                               href="{{ url_for('login_ep') + '?next=' + request.path }}"
                            >
                                立即购买
                            </a>
                        {% endif %}
                    </form>

                {% else %}
                    <div style="font-size: 23px;color: red;flex-grow: 2;display: flex;flex-direction: column;justify-content: flex-end">
                        商品已下架
                    </div>
                {% endif %}


            </div>
        </div>
    </div>

{% endblock %}